<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Diagram parameters
        const centerX = canvas.width / 2;
        const centerY = 250;
        const radius = 120;
        const lineWidth = 2;

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);

            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = lineWidth;
        ctx.lineCap = 'round';

        // 1. Draw the horizontal surface
        ctx.beginPath();
        ctx.moveTo(50, centerY + radius);
        ctx.lineTo(canvas.width - 50, centerY + radius);
        ctx.stroke();

        // 2. Draw the circle (ping-pong ball)
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the radius R (dashed line)
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX, centerY + radius);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 4. Draw the center of mass velocity vector v_C0
        const v_arrow_length = 100;
        drawArrow(centerX, centerY, centerX + v_arrow_length, centerY);
        
        // 5. Draw the angular velocity vector ω_0
        const omega_arrow_start_x = centerX + radius * 0.7;
        const omega_arrow_start_y = centerY - radius * 0.7;
        const omega_arrow_end_x = omega_arrow_start_x - 60;
        const omega_arrow_end_y = omega_arrow_start_y - 60;
        drawArrow(omega_arrow_start_x + 10, omega_arrow_start_y, omega_arrow_end_x + 10, omega_arrow_end_y);

        // 6. Add labels and text
        // Set font for labels
        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'center';
        
        // Label R
        ctx.fillText('R', centerX - 25, centerY + radius / 2);

        // Label O
        ctx.fillText('O', centerX, centerY + radius + 25);
        
        // Label μ
        ctx.fillText('μ', centerX + radius * 1.2, centerY + radius - 5);

        // Label v_C0
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('v', centerX + v_arrow_length/2 - 10, centerY - 15);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('C0', centerX + v_arrow_length/2 + 2, centerY - 10);

        // Label ω_0
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('ω', omega_arrow_start_x + 20, omega_arrow_end_y + 15);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('0', omega_arrow_start_x + 35, omega_arrow_end_y + 20);

        // 7. Add the caption
        ctx.font = '24px "KaiTi", "SimSun", serif'; // Use KaiTi or SimSun for Chinese characters
        ctx.textAlign = 'center';
        ctx.fillText('力图 6.11.1', centerX, canvas.height - 30);

    </script>
</body>
</html>